<template>
  <div>
    <h1>【aty-radio】 component demo</h1>
    <p>【aty-radio】 本质</p>

    <aty-row class="fd-radio-box">
      <aty-row>
        <aty-title level="4">1.【aty-radio】  基础</aty-title>
        <aty-radio value="1" checked>默认选中</aty-radio>
        <aty-radio value="2">默认未选中</aty-radio>
      </aty-row>

      <aty-row>
        <aty-title level="4">2.【aty-radio】  禁用</aty-title>
        <aty-radio value="2" disabled>默认选中</aty-radio>
        <aty-radio value="1" disabled checked>默认未选中</aty-radio>
      </aty-row>

      <aty-row>
        <aty-title level="4">3.【aty-radio】  大小</aty-title>
        <aty-row>
          <aty-radio size="small" value="1" radioLabel="宝马">小</aty-radio>
          <aty-radio size="default" value="2" radioLabel="奔驰" checked>中</aty-radio>
          <aty-radio size="large" value="3" radioLabel="大众">大</aty-radio>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">4.【aty-radio】  配合 art-radio-group</aty-title>
        <aty-radio-group name="fruit"
                         :dataList="dataList"
                         v-model="fruit"
                         @change="change" />
        <span>当前选中的是：{{fruit}}</span>
      </aty-row>

      <aty-row>
        <aty-title level="4">5.【aty-radio】  配合 art-radio-group 自定义 aty-radio</aty-title>
        <aty-panel>请注意， aty-radio-group上需要和其下的 aty-radio name 和value指针必须一致</aty-panel>
        <aty-radio-group name="car2" v-model="car2" :dataList="dataList" @change="change">
          <aty-radio value="11" name="car2" v-model="car2" radioLabel="宝马" />
          <aty-radio value="22" name="car2" v-model="car2" radioLabel="奔驰" />
          <aty-radio value="33" name="car2" v-model="car2" radioLabel="大众" />
          <aty-radio value="44" name="car2" v-model="car2" radioLabel="大地飞鹰" />
        </aty-radio-group>
        <span>当前选中的是：{{car2}}</span>
      </aty-row>
      <aty-row>
        <aty-title level="4">6.【aty-radio】  和 【art-radio-group】 change 事件  </aty-title>
        <aty-panel>请注意， aty-radio-group上需要和其下的 aty-radio name 和value指针必须一致</aty-panel>
        <aty-radio-group name="fruit2" :dataList="dataList" v-model="fruit2" @change="change">
          <aty-radio value="11" radioLabel="宝马" @change="change" />
        </aty-radio-group>
        <span>当前选中的是：{{fruit2String.label}}</span>
      </aty-row>

      <aty-row>
        <aty-title level="4">7.【aty-radio】  配合 art-radio-group 和自定义label</aty-title>
        <aty-radio-group name="fruit3" :dataList="dataList" v-model="fruit3">
          <template slot-scope="{item}" slot="radio">
            <aty-text :text="item.name+':'+item.code" />
          </template>
        </aty-radio-group>
        <span>当前选中的是：{{fruit3}}</span>
      </aty-row>

      <aty-row>
        <aty-title level="4">8.【art-radio-group】 direction </aty-title>
        <aty-radio-group name="fruit4" :dataList="dataList" vertical v-model="fruit4" />
        <span>当前选中的是：{{fruit4}}</span>
      </aty-row>
      <aty-row>
        <aty-title level="4">9.【art-radio-group】 type button </aty-title>
        <aty-radio-group name="fruit5" :dataList="dataList" type="button" size="small" v-model="fruit5" />
        <aty-radio-group name="fruit5" :dataList="dataList" type="button" size="default" v-model="fruit5" />
        <aty-radio-group name="fruit5" :dataList="dataList" type="button" size="large" v-model="fruit5" />
        <span>当前选中的是：{{fruit5}}</span>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      fruit: 1,
      car2: 2,
      fruit2: 2,
      fruit3: 4,
      fruit4: 3,
      fruit5: 3,
      dataList: [
        {
          code: '1',
          codeType: 'fruit',
          name: '苹果'
        },
        {
          code: '2',
          codeType: 'fruit',
          name: '香蕉'
        }, {
          code: '3',
          codeType: 'fruit',
          name: '梨'
        }, {
          code: '4',
          disabled: true,
          codeType: 'fruit',
          name: '橘子'
        }
      ],
      fruit2String: {}
    }
  },
  methods: {
    change (value, currentDataItem, name) {
      //  debugger
      console.log(value, currentDataItem, name)
      this[name + 'String'] = currentDataItem
    }
  },
  mounted () {
    setTimeout(() => {
      this.fruit2 = 3
    }, 2000)
  }
}
</script>
<style  lang="less" type="text/less"  scoped>
    .fd-radio-box {
        margin: 20px;
        text-align: left;
    }
    .fd-radio-box>.aty-row {
        padding-bottom: 15px;
    }

</style>
